<div class="resources">
  <div class="top-title">
    <div class="prefix title">
      <span i18n="@@iam.policies.details.resource">Resource</span>
      <span *ngIf="resourceType?.type === 'general'" style="display: inline-block;margin-left: 12px;">( <ng-container i18n="@@iam.policies.details.when-resource-type-is">Can only select one resource</ng-container>)</span>
    </div>
    <div class="suffix">
      <span>{{selectedResources.length}} <ng-container i18n="@@iam.policies.details.num-resource">Resource(s)</ng-container></span>
    </div>
  </div>
  <div class="selected-resources" *ngIf="selectedResources.length">
    <div class="resource" *ngFor="let rsc of selectedResources">
      <div i18n-nz-tooltip="@@common.click-to-edit" nz-tooltip="Click to edit" class="inner-box" (click)="openEditModal(rsc)">
        {{rsc.rn}}
      </div>
      <button nz-button nzType="default" [nzSize]="'large'" (click)="removeResource(rsc)"><i nz-icon nzType="close"></i></button>
    </div>
  </div>
  <nz-select class="nz-select-36" [class]="{invalid: isInvalid}" #resourcesSelector
             i18n-nzPlaceHolder="@@iam.policies.details.select-resource"
             nzPlaceHolder="Select resource"
             nzShowSearch
             nzServerSearch
             [(ngModel)]="resourceSelectModel"
             (ngModelChange)="onResourceChange()"
             (nzOnSearch)="onSearchResources($event)"
             [nzOptionHeightPx]="isResourceLoading ? 32 : 54">
    <ng-container *ngFor="let rsc of availableResources">
      <nz-option
        *ngIf="!isResourceLoading" nzCustomContent [nzValue]="rsc" [nzHide]="isSelected(rsc)">
        <div class="resource-selection-item">
          <div class="title">{{ rsc.name | T: rsc.name: "resource" }}</div>
          <div class="digest">{{ getDigest(rsc) }}</div>
        </div>
      </nz-option>
    </ng-container>
    <nz-option *ngIf="isResourceLoading" nzDisabled nzCustomContent>
      <i nz-icon nzType="loading" class="loading-icon"></i> <ng-container i18n="@@common.loading">Loading...</ng-container>
    </nz-option>
  </nz-select>
</div>

<nz-modal [(nzVisible)]="editModalVisible"
          [nzTitle]="modalTitle"
          [nzCentered]="true"
          [nzContent]="modalContent"
          [nzFooter]="modalFooter" (nzOnCancel)="closeModal()">
  <ng-template #modalTitle><ng-container i18n="@@iam.policies.details.set-resource-name">Set resource name (RN)</ng-container></ng-template>
  <ng-template #modalContent>
    <div class="rsc-config-modal">
      <div>
        <ng-container i18n="@@iam.policies.details.resource-name-description">Resource name (RN) uniquely identify resources. Every data can be seen as a resource, Project, Environment and Feature flag for example.</ng-container>
        <div style="display: inline-block;font-weight: 600;" i18n="@@iam.policies.details.legal-resource-name">Legal resource name (RN) cannot include {{'{'}} {{'}'}} and :</div>
      </div>

      <div class="edit-area">
        <div class="rn">
          <div class="label" i18n="@@common.resource-name">Resource name (RN)</div>
          <input style="color: rgba(0, 0, 0, 0.85)" nz-input [(ngModel)]="currentRn.val" disabled="true"/>
        </div>
        <div *ngFor="let param of rscParams" class="config">
          <div class="label">{{param.placeholder.displayName}}</div>
          <input nz-input [(ngModel)]="param.val" (ngModelChange)="vmValChanged()" [class]="{invalid: param.isInvalid}"/>
          <label
            nz-checkbox
            [(ngModel)]="param.isAnyChecked"
            (ngModelChange)="isValAnyCheckedChanged(param)">
            <ng-container i18n="@@common.any">Any</ng-container>
          </label>
        </div>
      </div>
    </div>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="closeModal()" i18n="@@common.cancel">Cancel</button>
    <button nz-button nzType="primary" [disabled]="false" (click)="save()" i18n="@@common.save">Save</button>
  </ng-template>
</nz-modal>
